<template>
  <div class="left-container">
    <Card height="170px"><Chart :option="barChartOption" /></Card>
    <Card height="170px"><Chart :option="lineChartOption" /></Card>
    <Card height="170px"><Chart :option="pieChartOption" /></Card>
  </div>
</template>

<script lang="ts" setup>
import { ECOption } from "../../utils/echarts";
const barChartOption: ECOption = {
  title: {
    text: "各行业程序员数量",
  },
  xAxis: {
    data: [
      "旅游行业",
      "游戏行业",
      "电商行业",
      "医疗行业",
      "金融行业",
      "教育行业",
      "餐饮行业",
    ],
  },
  series: {
    type: "bar",
    data: [300, 200, 400, 250, 550, 450, 350],
    barWidth: 15,
    itemStyle: {
      borderRadius: [2, 2, 0, 0],
    },
  },
  tooltip: {
    formatter: "{b}: {c}",
  },
};

const lineChartOption: ECOption = {
  title: {
    text: "学习变化",
  },
  xAxis: {
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月",
    ],
  },
  series: [
    {
      name: "新增技能",
      type: "line",
      data: [200, 300, 350, 220, 450, 320, 200, 300, 350, 220, 450, 320],
      smooth: true, // 曲线
    },
    {
      name: "新增项目",
      type: "line",
      data: [320, 200, 300, 350, 220, 450, 320, 200, 300, 350, 220, 450],
      smooth: true, // 曲线
    },
  ],
  tooltip: {
    formatter: (params: any) => {
      // return结果就是渲染的内容
      return params
        .map((item: any) => `${item.marker} ${item.seriesName}: ${item.data}`)
        .join("<br />");
    },
  },
};

const pieChartOption: ECOption = {
  title: {
    text: "工程师年龄分布",
  },
  xAxis: {
    show: false,
  },
  yAxis: {
    show: false,
  },
  series: {
    type: "pie",
    data: [
      { name: "20岁以下", value: 10 },
      { name: "20-29岁", value: 50 },
      { name: "30-39岁", value: 20 },
      { name: "40-49岁", value: 5 },
      { name: "50岁以上", value: 1 },
    ],
    radius: [28, 40],
    label: {
      show: false,
    },
  },
  legend: {
    top: "auto",
    bottom: 10,
  },
  tooltip: {
    trigger: "item",
    formatter: `{b}: {c}`,
  },
};

defineOptions({
  name: "Left",
});
</script>

<style scoped lang="scss">
.left-container {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;

  width: 100%;
  height: 100%;
}
</style>
